<template>
  <div class="">
    <el-dialog :visible="show" width="500px" @close="doClose">
      <!-- 标题栏 start -->
      <template #title>
        <div class="tltle flex">
          <h4>积分充值</h4>
          <p class="ml-5 ft-14" style="color: #fc5747">该积分为企业主钱包积分，非客户积分</p>
        </div>
      </template>
      <!-- 标题栏 end -->

      <!-- 类型选择 start -->
      <el-radio-group class="mt-10 mb-10" v-model="type" @change="changeType">
        <el-radio :label="20">增加</el-radio>
        <el-radio :label="30">减少</el-radio>
      </el-radio-group>
      <!-- 类型选择 end -->

      <!-- 积分选择列表 start -->
      <div v-if="type === 20" class="checkBox flex mb-10">
        <div
          class="checkBox-item flex items-center mr-8 mt-10"
          :class="index === checkIndex ? 'checkBox-item-active' : ''"
          v-for="(item, index) in checkList"
          :key="index"
          @click="checkIntegralNum(index)"
        >
          <div class="flex flex-col align-center" v-if="item.integral !== 'other'">
            <p>
              <span class="num">{{ item.integral }}</span>
              <span>积分</span>
            </p>
            <p v-if="item.giftIntegral" class="num">赠送{{ item.giftIntegral }}积分</p>
          </div>

          <div class="flex flex-col align-center" v-else>其他</div>
        </div>
      </div>
      <!-- 积分选择列表 end -->

      <!-- 输入表单 -->
      <el-form :model="formData" ref="elForm" :rules="rules">
        <!-- 统计总积分 -->

        <el-form-item class="mt-20" v-if="totalIntegral && type === 20">
          <el-input v-model="totalIntegral" disabled />
        </el-form-item>

        <el-form-item v-else label="" label-width="0" prop="rechargeIntegral">
          <el-input
            class="mt-10"
            style="width: 100%"
            :maxlength="7"
            v-model.number="formData.rechargeIntegral"
            placeholder="请输入积分值(1-1000000)"
            :disabled="checkIndex !== checkList.length - 1 && type === 20"
          ></el-input>
        </el-form-item>

        <el-form-item label="" label-width="0" prop="remark">
          <el-input
            type="textarea"
            :maxlength="50"
            :rows="3"
            show-word-limit
            v-model.trim="formData.remark"
            placeholder="备注调整原因(50字以内)"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 按钮栏 -->
      <div class="handleBox flex justify-center mt-15">
        <el-button size="medium" @click="show = false">取消</el-button>
        <el-button type="primary" size="medium" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash'
import { mapMutations } from 'vuex'
export default {
  name: 'CompanyInfoIntegralEdit',
  components: {},
  props: {
    // 是否显示
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateIntegral = (rule, value, callback) => {
      if (value < 1 || value > 1000000) {
        callback(new Error('请输入1-1000000之间的数值'))
      } else {
        callback()
      }
    }
    return {
      // 调整积分类型 20--增加 30--减少
      type: 20,
      // 当前选择积分项索引
      checkIndex: '',

      formData: {
        // 积分值
        rechargeIntegral: '',
        // 备注
        remark: ''
      },
      // 表单验证
      rules: {
        rechargeIntegral: [
          { type: 'number', message: '请输入数字值', trigger: ['blur', 'change'] },
          { validator: validateIntegral, trigger: ['blur', 'change'] }
        ]
      },

      // 积分选择项列表
      checkList: [],

      // 总积分
      totalIntegral: 0
    }
  },
  computed: {
    // 对话框是否显示
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  watch: {},
  created() {
    // 获取选择积分列表
    this.getIntegralList()
  },
  mounted() {},
  methods: {
    // 企业主资料刷新充值记录列表刷新写入
    // 企业主资料刷新基础信息刷新写入
    ...mapMutations('base', ['SET_TOP_REFRESH', 'SET_INFO_REFRESH']),
    // 获取选择积分列表
    async getIntegralList() {
      try {
        const { data } = await this.$http.user.integralConfig.selectList()
        this.checkList = data
          .map(el => ({ ...el, integral: Number(el.integral) }))
          .concat([
            {
              integral: 'other',
              giftIntegral: 0
            }
          ])
      } catch (error) {
        console.log('getIntegralList', error)
      }
    },

    // 选择积分项
    checkIntegralNum(index) {
      this.checkIndex = index
      if (index !== this.checkList.length - 1) {
        this.formData.rechargeIntegral = this.checkList[index].integral
        this.totalIntegral =
          Number(this.checkList[index].integral) + Number(this.checkList[index].giftIntegral)
        this.$refs.elForm.clearValidate('rechargeIntegral')
      } else {
        this.totalIntegral = 0
        this.formData.rechargeIntegral = ''
      }
    },

    changeType() {
      this.formData.rechargeIntegral = ''
      this.$refs.elForm.clearValidate('rechargeIntegral')
    },

    // 点击确定
    confirm: _.debounce(async function () {
      // 发送请求
      const res = await this.$http.finance.recharge.recharge({
        etpRechargeType: this.type,
        ...this.formData,
        etpId: this.$route.query.id
      })
      if (res.status === 200) {
        this.$message.success('操作成功')
        this.show = false
        this.SET_TOP_REFRESH(true)
        this.SET_INFO_REFRESH({ flag: true })
      }
    }, 400),

    // 关闭对话框
    doClose() {
      this.show = false
      // 清空选择
      this.checkIndex = ''
      this.type = 20
      this.$refs.elForm.resetFields()
      this.SET_TOP_REFRESH(true)
    }
  }
}
</script>

<style lang="scss" scoped>
// 标题部分
.tltle {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

// 积分选择盒子 start
.checkBox {
  flex-wrap: wrap;
  // 积分选择项
  .checkBox-item {
    &:hover {
      cursor: pointer;
    }
    width: 30%;
    height: 40px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid #eee;
    .num {
      color: #fc5747;
    }
  }

  // 积分选择项激活
  .checkBox-item.checkBox-item-active {
    border-color: #409eff;
  }
}
// 积分选择盒子 end

/deep/.el-dialog__body {
  padding-top: 0;
}
</style>
